<template>
  <div class="page">
    <v-pageTitle title="加班统计"></v-pageTitle>
    <!--工具条-->
    <v-pageToolbar align="left">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="加班时间">
          <el-date-picker
            size="small"
            v-model="formSearch.valueMonth"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formSearch.branch" size="small" filterable placeholder="请选择">
            <el-option
              v-for="item in branchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable>
      <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column v-for="(item,index) in tableData.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100">
              <template slot-scope="scope">
                <el-button  @click="handleClick(scope.$index, scope.row)" type="danger" size="small">明细</i></el-button>
              </template>
          </el-table-column>
      </el-table>
    </v-pageTable>

    <!--编辑界面-->
    <el-dialog title="明细" v-model="detailTableVisible" :close-on-click-modal="false">
      <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
        <el-table v-loading="tableDetailData.loading" :data="tableDetailData.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column v-for="(item,index) in tableDetailData.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
            </el-table-column>
        </el-table>
      </v-pageTable>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="detailTableVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 图表 -->
    <v-pageToolbar align='left'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="部门加班走势图">
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <div id="myChart" style="margin-top:20px;"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        branchOptions:[
          {
            value: '选项1',
            label: '软件部'
          }, {
            value: '选项2',
            label: '新业务部'
          }, {
            value: '选项3',
            label: '市场部'
          }, {
            value: '选项4',
            label: '维修部'
          }, {
            value: '选项5',
            label: '人事部'
          }
        ],
        formSearch:{
          valueMonth: new Date(),
          branch: ''
        },
        tableData: {
            loading: true,
            head: [],
            body: []
        },

        tableDetailData: {
            loading: true,
            head: [],
            body: []
        },
        
        detailTableVisible: false,//编辑界面是否显示
        detailLoading: false,

        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      onSearch(formSearch){
        console.log(formSearch)
      },
      getTableData(data) {
          // ajax 查询表格数据
          this.tableData.head = [
              {
                  key: 'date',
                  name: '日期-月'
              },
              {
                  key: 'time1',
                  name: '加班时间'
              },
              {
                  key: 'time2',
                  name: '请假时间'
              },
              {
                  key: 'sum',
                  name: '合计'
              }
          ]
          this.tableData.body = [
            {
              date: '2017-11',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-10',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-09',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-08',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-07',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-06',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-05',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-04',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-03',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-02',
              time1: '20',
              time2: '7',
              sum: '13'
            }, {
              date: '2017-01',
              time1: '20',
              time2: '7',
              sum: '13'
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      getTableDetailData(){
        // ajax 查询表格数据
        this.tableDetailData.head = [
            {
                key: 'staff',
                name: '人员'
            },
            {
                key: 'time1',
                name: '加班时间'
            },
            {
                key: 'time2',
                name: '请假时间'
            },
            {
                key: 'sum',
                name: '合计'
            }
        ]
        this.tableDetailData.body = [
          {
            staff: '张召忠',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '许静海',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '张家力',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '张喜',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '王盼盼',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '司琳',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '言顺天',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '陈光明',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '郑山',
            time1: '20',
            time2: '7',
            sum: '13'
          }, {
            staff: '苏承彬',
            time1: '20',
            time2: '7',
            sum: '13'
          }
        ]
        // 模拟加载
        setTimeout(() => {
            this.tableDetailData.loading = false
        }, 1000)
      },
      //显示明细界面
      handleClick(index,row) {
				console.log(row);
				this.detailTableVisible = true;
				// this.editForm = Object.assign({}, row);
        this.getTableDetailData();
      },
      selsChange: function (sels) {
				this.sels = sels;
			},
      sizeChange(val){
        console.log(val)
        this.getTableDetailData()
      },
      pageChange(val){
        console.log(val)
        this.getTableDetailData()
      },
      drawLine(){
        // 基于准备好的dom
        var mainContainer = document.getElementById('myChart');
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeMainContainer = function () {
            mainContainer.style.width = window.innerWidth*0.85+'px';
            mainContainer.style.height = window.innerHeight*0.5+'px';
        };
        //设置div容器高宽
        resizeMainContainer();
        // 初始化echarts实例
        var myChart = this.$echarts.init(mainContainer);  
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
              text: '',
              left: 'center',
              subtext: ''
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              left: '10%',
              data:['工作时长']
          },
          toolbox: {
              right: '10%',
              show: true,
              feature: {
                  dataZoom: {
                      yAxisIndex: 'none'
                  },
                  dataView: {readOnly: false},
                  magicType: {type: ['bar', 'line']},
                  restore: {},
                  saveAsImage: {}
              }
          },
          xAxis:  {
              type: 'category',
              boundaryGap: false,
              data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  formatter: '{value} h'
              }
          },
          series: [
              {
                  name:'工作时长',
                  type:'line',
                  label: {
                      normal: {
                          show: true,
                          position: 'top'
                      }
                  },
                  areaStyle: {normal: {}},
                  data:[17.5, 31, 48, 37.5, 62, 78, 40, 27.5, 43, 56, 37.5, 68],
              }
          ]
        });
        // 自适应
        window.onresize = function(){
          mainContainer.style.width = window.innerWidth*0.85+'px';
          mainContainer.style.height = window.innerHeight*0.5+'px';
          myChart.resize();
        }
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
        // 绘制图表
        this.drawLine()
    }
  }
</script>